import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    StatusBar,
    ImageBackground,
    Button,
    ToastAndroid,
    FlatList,
    Alert
} from 'react-native';
import * as Color from "../../../lib.xjs/constant/Color";
import TouchButton from "../../../lib.xjs/widget/btn/HighlightButton";
import TouchableItem from "react-navigation/src/views/TouchableItem";
import HttpHelper from "../../../lib.xjs/helper/HttpHelper";
import BottomPop from "../../../lib.xjs/widget/modal/BottomPop";
import BizUser from "../../entity/BizUser";
import * as BizConstant from "../../constant/BizContant";
import {UUID} from "../../../lib.xjs/util/UUID";
import {markSuccess} from "react-native-update";

const ic_open_door = require('../../../../img/gaqu/ic_open_door.png');
const ic_power_on = require('../../../../img/gaqu/ic_power_on.png');
const ic_power_off = require('../../../../img/gaqu/ic_power_off.png');

/** 仓体操作主页 */
export default class CabinOperateMain extends Component {

    mCabinId;

    static navigationOptions = ({navigation}) => ({
        title: `${navigation.state.params.cabinName}`,
    });

    constructor(props){
        super(props);
        this.state = {
        };

        this.mCabinId = this.props.navigation.state.params.cabinId;
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    hidden={false}
                    translucent={false}
                    backgroundColor={Color.colorPrimaryDark}/>

                <View style={styles.horizontal_gap}/>

                <View style={styles.content}>
                    <View style={styles.content_title}>
                        <View style={{height: '80%', width:8, backgroundColor: Color.colorPrimaryLight, marginRight: 15,}}/>
                        <Text style={{fontSize: 18}}>仓体基本信息</Text>
                    </View>

                    <Text style={styles.content_text}>    仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息仓体基本信息</Text>
                </View>

                <View style={styles.horizontal_gap}/>

                <View style={styles.content}>
                    <View style={styles.content_func_btn_layout}>
                        <View style={styles.content_func_btn_touch}>
                            <TouchableItem onPress={() => this._confirmToDo('确定开门', this._doOpenDoor)}>
                                <View style={[{backgroundColor:Color.red}, styles.content_func_btn_item]}>
                                    <Image style={styles.input_bg} source={ic_open_door} resizeMode={Image.resizeMode.center} />
                                    <Text style={{color:Color.white}}>开门</Text>
                                </View>
                            </TouchableItem>
                        </View>

                        <View style={styles.content_func_btn_touch}>
                            <TouchableItem onPress={() => this._confirmToDo('确定开电', this._doPowerOn)}>
                                <View style={[{backgroundColor:Color.orange}, styles.content_func_btn_item]}>
                                    <Image style={styles.input_bg} source={ic_power_on} resizeMode={Image.resizeMode.contain} />
                                    <Text style={{color:Color.white}}>开电</Text>
                                </View>
                            </TouchableItem>
                        </View>

                        <View style={styles.content_func_btn_touch}>
                            <TouchableItem onPress={() => this._confirmToDo('确定关电', this._doPowerOff)}>
                                <View style={[{backgroundColor:Color.colorPrimaryDark}, styles.content_func_btn_item]}>
                                    <Image style={styles.input_bg} source={ic_power_off} resizeMode={Image.resizeMode.cover} />
                                    <Text style={{color:Color.white}}>关电</Text>
                                </View>
                            </TouchableItem>
                        </View>

                    </View>
                </View>
                <HttpHelper ref={'http'}/>
            </View>
        );
    };

    _confirmToDo(info:string, callBack):void{
        Alert.alert('提示', info, [{
                text: '是', onPress: () => {
                    callBack();
                }
            }, {
                text: '否', onPress: () => {}
            },
        ]);
    }

    /** 开门 */
    _doOpenDoor = ():void => {
        if (!this.refs.http) return;
        let head = BizUser.getHeadParam(true);
        let body = new Map();
        body.set("cangId", this.mCabinId);

        this.refs.http.setURL(BizConstant.GET_OPEN_DOOR)
            .setMethod(HttpHelper.GET)
            .setNotiInfo("")
            .setHeadParams(head)
            .setBodyParams(body)
            .setRequestId(UUID.getOne())
            .setListener((responseCode: number, res: Object) => {
                if (responseCode !== HttpHelper.RESPONSE_SUCCESS) return;
                ToastAndroid.show('开门成功', ToastAndroid.SHORT);
            })
            .setTimeout(10 * 1000)
            .start(false);
    };

    /** 关电 */
    _doPowerOff = ():void => {
        if (!this.refs.http) return;
        let head = BizUser.getHeadParam(true);
        let body = new Map();
        body.set("cangId", this.mCabinId);

        this.refs.http.setURL(BizConstant.GET_POWER_OFF)
            .setMethod(HttpHelper.GET)
            .setNotiInfo("")
            .setHeadParams(head)
            .setBodyParams(body)
            .setRequestId(UUID.getOne())
            .setListener((responseCode: number, res: Object) => {
                if (responseCode !== HttpHelper.RESPONSE_SUCCESS) return;
                ToastAndroid.show('断电成功', ToastAndroid.SHORT);
            })
            .setTimeout(10 * 1000)
            .start(false);
    };

    /** 开电 */
    _doPowerOn = ():void => {
        if (!this.refs.http) return;
        let head = BizUser.getHeadParam(true);
        let body = new Map();
        body.set("cangId", this.mCabinId);

        this.refs.http.setURL(BizConstant.GET_POWER_ON)
            .setMethod(HttpHelper.GET)
            .setNotiInfo("")
            .setHeadParams(head)
            .setBodyParams(body)
            .setRequestId(UUID.getOne())
            .setListener((responseCode: number, res: Object) => {
                if (responseCode !== HttpHelper.RESPONSE_SUCCESS) return;
                ToastAndroid.show('开电成功', ToastAndroid.SHORT);
            })
            .setTimeout(10 * 1000)
            .start(false);
    };
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        flexDirection:'column',
    },

    content: {
        flexDirection:'column',
        backgroundColor:Color.windowWhite,
        padding: 5,
    },

    content_title: {
        height: 25,
        flexDirection:'row',
        alignItems: 'center',
    },

    content_text: {
        marginTop: 5,
        marginHorizontal: 10,
    },

    horizontal_gap: {
        height: 10,
        backgroundColor:Color.lightMoreGray,
    },

    content_func_btn_layout: {
        flexDirection: 'row',
        justifyContent:'space-around',
        alignItems: 'center',
    },

    content_func_btn_touch: {
        flex:1,
        padding:5,
    },

    content_func_btn_item: {
        flexDirection:'column',
        justifyContent: 'center',
        alignItems:'center',
        padding: 5,
        margin: 5,
        borderRadius:5,
    },

    input_bg: {
        height: 50,
        width: 50,
    },

    line_layout: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 5,
    },

    buttonTouch: {
        width: "45%",
        height: 50,
        backgroundColor:Color.colorPrimary,
    },

    buttonText: {
        fontSize: 22,
        color:Color.white,
    },
});
